<script setup lang="ts">
  import { useDrag } from 'vue3-dnd'
  import { toRefs } from '@vueuse/core'

  interface DropResult {
    name: string
    id: string
  }

  const props = defineProps<{
    dragItem: DropResult
  }>()

  const [dragBoxCollect, drag] = useDrag(() => ({
    type: "box",
    item: {
      name: props.dragItem.name,
      id: props.dragItem.id
    },
    end: (item, monitor) => {
      // console.log("dragbox", item)
      // console.log("dragbox", monitor)
    },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  }))
</script>

<template>
  <div class="drag-item" :ref="drag" >
    {{ props.dragItem.name }}
  </div>
</template>

<style scoped>
  .drag-item {
    background-color: #8a6227;
    padding: 10px;
    border: 1px solid black;
    cursor: move;
  }
</style>